<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>应用配置</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<link rel="stylesheet" href="/hyqcss/public.css">
	<style type="text/css">
		body{
			background: #e9e9e9;
		}
		/*公共头部带搜索*/
		.public_container{
			padding: 20px;
			/*background: #fff;*/
		}
		.public_title_container{
			height: 54px;
			padding: 0 20px;
			font-size: 14px;
			display: flex;
			align-items: center;
			background: #f9f9f9;
			border-bottom: 1px solid #f0f0f0;
		}
		.public_title_container a{
			margin-right: 30px;
			height: 54px;
			line-height: 54px;
			cursor: pointer;
		}
		.public_title_active{
			color: #1E9FFF;
			border-bottom: 1px solid #1E9FFF;
		}
		.public_buttonSearch_container{
			border: 1px solid #d2d2d2;
			border-top: none;
		}
		.public_mian_container{
			background: #fff;
			padding:32px 32px 20px 32px;
		}
		.public_content{
			margin-top: 20px;
		}
		.public_content:first-child{
			margin-top: 0;
		}
		.settingCompany_container{
			border: 1px solid #e8e8e8;
			height: 60px;
			width: 250px;
			display: flex;
			justify-content: center;
			align-items: center;
			padding:20px 0;
			cursor: pointer;
		}
		.settingCompany_container svg{
			width: 30px;
			height: 30px;
			color: #999;
		}
		.public_mianLinkCompany{
			margin-top: 10px;
		}
		.public_mian_container h4{
			color: red;
			font-size: 14px;
		}
		.public_domainName_container{
			display: flex;
			align-items: center;
			margin-bottom: 10px;
		}
		.public_domainName_container a{
			color: #1890FF;
			font-size: 14px;
		}
		.public_domainName_container h3{
			font-size: 14px;
			color: rgba(0,0,0,0.65);
		}
		.public_mian_container h5{
			color: #999;
			font-size: 12px;
		}
		.btn-h{
			box-sizing: border-box;
			height: 32px;
			min-width: 90px;
			font-size: 14px;
			display: inline-block;
			text-align: center;
			border-radius: 2px;
			border: none;
			line-height: 32px;
			outline: none;
			color: #fff;
			width: 90px;
			cursor: pointer;
		}
		.btn-success-h{
			background: #1E9FFF;
		}
		.btn-warning-h{
			background: #f0ad4e;
		}
		.btn-danger-h{
			background: #f0ad4e;
		}
		.btn-default-h{
			background: #fff;
			color: #333 !important;
			border: 1px solid #ddd !important;
		}

	</style>
</head>
<body>
		<!-- 顶部提示框 开始 -->
		<div class="public_tipSetting_contaienr">
			<div class="public_tipSetting_content">
				<p>侧边栏需新建应用，为了方便起见，侧边栏功能可以公用一个应用，将不同功能的URL复制进去即可，详细配置可参考教程。</p>
				<a href="https://support.qq.com/products/174823/faqs/69700" target="_blank">查看教程</a>
				<svg t="1599462804099" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8813" width="15" height="15"><path d="M512 102.4a409.6 409.6 0 1 0 409.6 409.6 409.6 409.6 0 0 0-409.6-409.6z m181.248 518.144a51.2 51.2 0 0 1-72.704 72.704L512 584.192l-108.544 109.056a51.2 51.2 0 0 1-72.704-72.704L439.808 512 330.752 403.456a51.2 51.2 0 0 1 72.704-72.704L512 439.808l108.544-109.056a51.2 51.2 0 0 1 72.704 72.704L584.192 512z" fill="" p-id="8814"></path></svg>
			</div>
		</div>
		<!-- 顶部提示框 结束 -->
		<div class="public_container">
			<!-- /*公共头部带搜索*/ -->
			<div class="public_content">
				<div class="public_title_container">
					<a href="/Addons/QyWechat/Admin/Reply/quick_reply_steps.html" class="public_title_active">应用配置</a>
				</div>
				<div>
					<div class="public_buttonSearch_content">
						<div >
							<!-- /*公共头部*/ -->
							<!-- <form class="layui-form" id="form1"> -->
							<div class="public_content" style="margin-top: 20px;">
								<div class="public_title_container">
									<p>第一步：设置第三方回调参数</p>
								</div>
								<div class="public_mian_container">
									<div class="public_form_content">
										<div class="layui-form-item">
								            <label class="layui-form-label" style="width: 200px;">企业appid<span style="color:red;">*</span></label>
								            <div class="layui-input-block">
								                <input type="text" id="qy_appid" name="qy_appid"  required lay-verify="required"  style="width: 80%"placeholder="请填写正确的需要使用自建应用的企业appid" autocomplete="off" class="layui-input" value="{$confing->qy_appid}">
								            </div>
								        </div>
								        <div class="layui-form-item">
								            <label class="layui-form-label" style="width: 200px;">应用secret<span style="color:red;">*</span></label>
								            <div class="layui-input-block">
								                <input type="text" id="permanent_code"  style="width: 50%;display: unset;" placeholder="等待回调生成应用secret" autocomplete="off" class="layui-input" value="{$confing->permanent_code}" readonly >
												<span class="btn-h btn-success-h mar-20-h" onclick="permanent_code()">复制</span>
								            </div>
								        </div>
									</div>
									<div class="layui-btn-container" style="margin-left:200px;">
										<button class="layui-btn" lay-but onclick="sunb()">修改配置</button>
									</div>
								</div>
							</div>
						<!-- </form> -->
							<div class="public_content">
								<div class="public_title_container">
									<p>第二步：设置自建应用信息</p>
									
								</div>
								<div class="public_mian_container">
									<h4>小提醒：请注意检查不要有空格</h4>
									<div class="settingCompany_container" id="openSecret">
										{if $replyConfig->square_logo_url}
										<img id="square_logo_url" src="{$replyConfig->square_logo_url}" width="60px" height="60px"/>
										<span id="appName">{$replyConfig->name}</span>
										{else}
										<svg viewBox="64 64 896 896" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg>
										{/if}
									</div>
								</div>
							</div>
							<div class="public_content">
								<div class="public_title_container">
									<p>第三步：配置聊天工具栏链接</p>
									
								</div>
								<div class="public_mian_container">
									<h4>小提醒：请注意链接一定要是https开头的协议</h4>
									
									<a href="https://work.weixin.qq.com/wework_admin/frame#apps" type="button" class="layui-btn layui-btn-normal public_mianLinkCompany" target="_blank">前往配置链接</a>
								</div>
							</div>
							<div class="public_content">
								<div class="public_title_container">
									<p>第四步：设置应用可信域名</p>
								</div>
								<div class="public_mian_container">
									<!-- 域名xxx.com改成咱们的域名 -->
									<div class="public_domainName_container">
										<h3>在应用设置页，将 <?= $_SERVER['SERVER_NAME'];?> 设置为可信域名，并下载校验文件保存到电脑本地后，在此处上传。</h3>
										<a href="http://weidogstest.oss-cn-beijing.aliyuncs.com/36579caae10b10f726d7b3404ac6778e.png" target="_blank">查看图示</a>
									</div>
									<div class="layui-form-item">
										<button type="button" class="layui-btn layui-btn-normal" id="test1">
											<i class="layui-icon">&#xe67c;</i>点击上传
										</button>
										<!-- 有的时候显示 没有的时候隐藏 -->
										<div class="layui-form-mid layui-word-aux" id="uploadTxt" ></div>
									</div>
									
									<h5>请上传txt格式的校验文件，用于完成域名归属验证。否则无法正常使用聊天侧边栏。</h5>
								</div>
								
								<div class="public_content">
									<div class="public_title_container">
										<p>第五步：配置应用权限</p>
										
									</div>
									<div class="public_mian_container">
										<div class="public_domainName_container">
											<h3>客户联系-客户-点击展开API-可调用应用-修改。  </h3>
											<a href="https://txc.gtimg.com/data/174823/2020/0711/97b9bd419eff324fc1d3806e94ebf58b.png" target="_blank">查看图示</a>
										</div>	
										<div class="public_mian_container">
											<a href="https://work.weixin.qq.com/wework_admin/frame#customer/analysis" type="button" class="layui-btn layui-btn-normal public_mianLinkCompany" target="_blank">前往配置权限</a>
											
										</div>
									</div>
								</div>
								<!-- /*公共头部*/ end -->
								
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	<script src="/cdn/jquery.js"></script>
	<script src="/layui/layui.js"></script>
	<script src="/js/ajax.js"></script>
	<script type="text/javascript">
		function sunb(){
			var qy_appid = $("#qy_appid").val();
			myAjaxPost(false, true, 'quick_reply_steps.html', { qy_appid:qy_appid}, function (resp) {
				tusi(resp.msg);
			});
		}
		// 上传文件
		layui.use('upload', function(){
			var upload = layui.upload;
			
		  //执行实例
		  var uploadInst = upload.render({
		    elem: '#test1' //绑定元素
			,accept: 'file' //普通文件
			,exts: 'txt' //只允许上传
		    ,url: 'upload_txt.html' //上传接口
		    ,done: function(res){
		    	layer.msg(res.msg, {
						  time: 500 //2秒关闭（如果不配置，默认是3秒）
						}, function(){
							$("#uploadTxt").html(res.data.fileName);
						});
		    }
		    ,error: function(){
		      //请求异常回调
		  }
		});
		});
		
		$('.public_tipSetting_contaienr svg').click(function(){
			$('.public_tipSetting_contaienr').hide();
		})

		function ucopyEncodingAESKey(){
			var e = document.getElementById("uEncodingAESKey"); 
		    e.select(); // 选择对象 
		    document.execCommand("Copy"); // 执行浏览器复制命令
		}

		function permanent_code(){
			var e = document.getElementById("permanent_code"); 
		    e.select(); // 选择对象 
		    document.execCommand("Copy"); // 执行浏览器复制命令
		}

		function ucopy(){
			var e = document.getElementById("ucopy"); 
		    e.select(); // 选择对象 
		    document.execCommand("Copy"); // 执行浏览器复制命令
		}

	</script>
	<script type="text/javascript">
		
		$('#openSecret').click(function(){
			layer.open({
				type: 2,
				title: '请输入配置信息',
				shadeClose: true,
				shade: 0.2,
				area: ['500px', '300px'],
				content: 'quick_reply_set.html'
			}); 
		})
	</script>
</body>
</html>